<template>
    <div class="daily">
        <div class="left">
            <el-timeline>
                <el-timeline-item v-for="(activity, index) in activities" :key="index" type="primary" placement="top"
                    :hollow="true" :timestamp="activity.time">
                    <span class="daily_item" @click="handlerDaily(activity)">{{ activity.url }}</span>
                </el-timeline-item>
            </el-timeline>
        </div>
        <div class="right" ref="tableau" v-html="excelHtml">

        </div>
    </div>
</template>


<script setup lang='ts'>
import { getDailyApi, getDailyByIdApi } from '@/service/api'
import { dayjs } from 'element-plus'
import * as XLSX from 'xlsx'
import { BASE_URL } from '@/service/config'
// console.log(read);

type DailyType = {
    time: string,
    url: string,
}

const handlerDaily = async (activity: any) => {
    var myHeaders = new Headers();
    myHeaders.append("device", "front");
    var requestOptions = {
        method: 'GET',
        headers: myHeaders,
        responseType: 'arraybuffer'
    };

    fetch(`${BASE_URL}/daily/getDailyById?_id=${activity._id}`, requestOptions)
        .then(async response => {
            const res = await response.arrayBuffer()
            let data = new Uint8Array(res);
            let workbook = XLSX.read(data, { type: "array" });   //表格对象
            let sheetNames = workbook.SheetNames;  //获取到所有表格
            let worksheet = workbook.Sheets[sheetNames[0]];  //取第一张表
            console.log(worksheet);

            // let json = XLSX.utils.sheet_to_json(worksheet);
            let html = XLSX.utils.sheet_to_html(worksheet);
            // console.log(json);
            excelHtml.value = html
        })
        .catch(error => console.log('error', error));


    // tableau.value.attr.border = '1'


}

const excelHtml = ref('')
const tableau = ref()


let activities = ref<DailyType[]>()

const getDailyFn = async () => {
    const { data } = await getDailyApi()
    activities.value = data.value.data.map((item: DailyType) => {
        const nameArr = item.url.split('-')
        const fileTime = dayjs(Number(nameArr[1].split('.')[0])).format('YYYY-MM-DD')
        item.url = nameArr[0] + '-' + fileTime + '.xlsx'
        return {
            ...item,
            time: dayjs(Number(item.time)).format('YYYY-MM-DD HH:mm:ss'),
            url: item.url,
        }
    })
}
getDailyFn()

</script>


<style scoped lang='scss'>
.daily {
    flex: 1;
    display: flex;
    padding: 90px 30px 30px;

    // height: calc(100vh - 180px);
    .left {
        flex: 0.3;
    }

    .right {
        flex: 0.7;
    }

    .daily_item {
        &:hover {
            cursor: pointer;
        }
    }
}
</style>